<!-- src/views/warehousing/toBeUp/ShangjiaDialog.vue -->
<script setup>
import { ref, watch, defineProps, defineEmits, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { getWarehouseListApi } from '@/api/warehouse'
import { getWarehouseAreaListApi } from '@/api/warehouseArea'
import { getWarehouseLocaListApi } from '@/api/warehouseAreaLoca'
import { shangjiaApi } from '@/api/warehousingEntryUp'

// 定义组件属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => ({})
  },
  ableCount: {
    type: Number,
    default: 0
  }
})

// 定义事件发射
const emit = defineEmits(['update:visible', 'success'])

// 上架表单，与后端EntryUpDto实体类对应
const shangjiaForm = ref({
  entryDetailsId: '',
  skuId: '',
  warehouseId: '',
  warehouseAreaId: '',
  warehouseAreaLocaId: '',
  countAble: '',
  count: ''
})

// 仓库、库区、库位数据
const warehouseList = ref([])
const areaList = ref([])
const locaList = ref([])

// 获取仓库列表
const getWarehouseList = async () => {
  try {
    const res = await getWarehouseListApi()
    if (res.code === 1) {
      warehouseList.value = res.data
    }
  } catch (error) {
    ElMessage.error('获取仓库列表失败')
  }
}

// 获取库区列表
const getAreaList = async (warehouseId) => {
  if (!warehouseId) {
    areaList.value = []
    locaList.value = []
    return
  }
  
  try {
    const res = await getWarehouseAreaListApi(warehouseId)
    if (res.code === 1) {
      areaList.value = res.data
    }
  } catch (error) {
    ElMessage.error('获取库区列表失败')
  }
}

// 获取库位列表
const getLocaList = async (areaId) => {
  if (!areaId) {
    locaList.value = []
    return
  }
  
  try {
    const res = await getWarehouseLocaListApi(areaId)
    if (res.code === 1) {
      locaList.value = res.data
    }
  } catch (error) {
    ElMessage.error('获取库位列表失败')
  }
}

// 监听仓库选择变化
watch(() => shangjiaForm.value.warehouseId, (newVal) => {
  shangjiaForm.value.warehouseAreaId = ''
  shangjiaForm.value.warehouseAreaLocaId = ''
  areaList.value = []
  locaList.value = []
  getAreaList(newVal)
})

// 监听库区选择变化
watch(() => shangjiaForm.value.warehouseAreaId, (newVal) => {
  shangjiaForm.value.warehouseAreaLocaId = ''
  locaList.value = []
  getLocaList(newVal)
})

// 监听visible变化，当弹窗打开时初始化数据
watch(() => props.visible, async (newVal) => {
  if (newVal) {
    // 使用nextTick确保DOM更新完成后再初始化
    await nextTick()
    initForm()
  }
})

// 初始化表单数据
const initForm = () => {
  if (props.rowData && props.rowData.id) {
    shangjiaForm.value = {
      entryDetailsId: props.rowData.id,
      skuId: props.rowData.skuId,
      warehouseId: '',
      warehouseAreaId: '',
      warehouseAreaLocaId: '',
      countAble: props.ableCount,
      count: ''
    }
    
    // 清空级联选择
    areaList.value = []
    locaList.value = []
    
    // 获取仓库列表
    getWarehouseList()
  }
}

// 确认上架
const confirmShangjia = async () => {
  if (!shangjiaForm.value.count) {
    ElMessage.warning('请输入上架数量')
    return
  }
  
  if (shangjiaForm.value.count > props.ableCount) {
    ElMessage.warning('上架数量不能超过可上架数量')
    return
  }
  
  if (!shangjiaForm.value.warehouseId) {
    ElMessage.warning('请选择仓库')
    return
  }
  
  if (!shangjiaForm.value.warehouseAreaId) {
    ElMessage.warning('请选择库区')
    return
  }
  
  if (!shangjiaForm.value.warehouseAreaLocaId) {
    ElMessage.warning('请选择库位')
    return
  }
  
  try {
    // 调用后端上架接口
    const res = await shangjiaApi(shangjiaForm.value)
    if (res.code === 1) {
      ElMessage.success('上架成功')
      emit('update:visible', false)
      emit('success')
    } else {
      ElMessage.error(res.msg || '上架失败')
    }
  } catch (error) {
    ElMessage.error('上架失败')
  }
}

// 关闭弹窗
const closeDialog = () => {
  emit('update:visible', false)
}
</script>

<template>
  <el-dialog 
    :model-value="visible" 
    @update:model-value="closeDialog"
    title="商品上架" 
    width="500px"
  >
    <el-form :model="shangjiaForm" label-width="100px">
      <el-form-item label="可上架数量">
        <el-input :model-value="ableCount" disabled />
      </el-form-item>
      <el-form-item label="上架数量">
        <el-input 
          v-model="shangjiaForm.count" 
          placeholder="请输入上架数量" 
          type="number"
          :max="ableCount"
        />
      </el-form-item>
      <el-form-item label="仓库">
        <el-select 
          v-model="shangjiaForm.warehouseId" 
          placeholder="请选择仓库"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="item in warehouseList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="库区">
        <el-select 
          v-model="shangjiaForm.warehouseAreaId" 
          placeholder="请选择库区"
          clearable
          style="width: 100%"
          :disabled="!shangjiaForm.warehouseId"
        >
          <el-option
            v-for="item in areaList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="库位">
        <el-select 
          v-model="shangjiaForm.warehouseAreaLocaId" 
          placeholder="请选择库位"
          clearable
          style="width: 100%"
          :disabled="!shangjiaForm.warehouseAreaId"
        >
          <el-option
            v-for="item in locaList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="confirmShangjia">确认上架</el-button>
    </template>
  </el-dialog>
</template>